<!--导航栏-->
<div class="row-fluid">
    <div class="navbar no-margin">
        <div class="navbar-inner">
            <ul class="breadcrumb">
                <i class="icon-chevron-left hide-sidebar"><a href='#' title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
                <i class="icon-chevron-right show-sidebar" style="display:none;"><a href='#' title="Show Sidebar"
                        rel='tooltip'>&nbsp;</a></i>
                <li>
                    <a href="#/star">首页</a>
                </li>
                <li>
                    <a href="#/star/cost/health_score_list2/{{vm.p.tag}}/{{vm.p.dt}}/0/0">健康分列表</a>
                </li>
                <li class="active">健康分详情</li>
            </ul>
        </div>
    </div>
</div>
<style>
    .red-span {
        color: #d44950;
        font-weight: bold;
    }

    .score-line-gap {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .final-score {
        font-weight: bold;
        font-size: 2rem;
    }
</style>
<div class="pull-convert-alert"></div>

<div style="margin-left:10px;margin-right:10px;">
    <a href="https://docs.qq.com/doc/DSGJaZFZhVXpvbGFS" style="float: right;margin-left:5px;" target="_blank"><u>健康分计算规则（采用100分制）</u></a>
    <a href="https://docs.qq.com/doc/DSERLb29FcWFCZEpQ" style="float: right;margin-left:5px;" target="_blank"><u>计算异常项说明&处理方案</u></a>
    <a href="https://docs.qq.com/doc/DSFhVbnJrR2lxSVZ6" style="float: right;margin-left:5px;" target="_blank"><u>存储异常项说明&处理方案</u></a>
</div>

<div class="container-fluid">
    <div style="margin: 10px">
        <div class="row">
            <div class="col-sm-12 col-md-12 main">
                <h3 class="sub-header" style="font-size: 3rem;text-align: center;">健康分详情</h3>
                <div class="col-sm-8 col-md-8" style="float:left; padding-top: 50px;font-size: 1.5rem;">
                    <p class="score-line-gap">
                        <span class="final-score">健康得分：</span>
                        <span class="red-span">{{vm.p.healthScore}}分</span>
                        ({{vm.p.dt}})
                    </p>
                    <p class="score-line-gap">项目：{{vm.p.project}} </p>
                    <p class="score-line-gap">应用：{{vm.p.appName}} (
                        <a ng-show="vm.p.tag=='store'" href="https://dp.58corp.com/data-map/detail-page/{{vm.p.appId}}" target="_blank">查看</a>
                        <a ng-show="vm.p.tag=='task'" href="https://dp.58corp.com/data-develop/task-list/task-detail/{{vm.p.appId}}" target="_blank">查看</a>
                        )</p>
                </div>
                <div style="width: 80%; display: inline-block;">
                    <div class="col-xs-6 col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">数据摘要</div>
                            <table class="table">
                                <thead><tr><th>指标</th><th>当前值</th></tr></thead>
                                <tbody>
                                <tr ng-repeat="m in vm.p.dataContentItems">
                                    <th>{{m.key}}</th>
                                    <td>{{m.val}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-xs-6 col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">异常项</div>
                            <table class="table">
                                <thead><tr><th>异常类型</th><th>扣分值</th></tr></thead>
                                <tbody>
                                <tr ng-repeat="m in vm.p.healthReasonItems">
                                    <th>{{m.key}}</th>
                                    <td>{{m.val}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>